<!DOCTYPE html >
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!--
        /**
        * o------------------------------------------------------------------------------o
        * | This file is part of the RGraph package - you can learn more at:             |
        * |                                                                              |
        * |                          http://www.rgraph.net                               |
        * |                                                                              |
        * | This package is licensed under the RGraph license. For all kinds of business |
        * | purposes there is a small one-time licensing fee to pay and for non          |
        * | commercial  purposes it is free to use. You can read the full license here:  |
        * |                                                                              |
        * |                      http://www.rgraph.net/LICENSE.txt                       |
        * o------------------------------------------------------------------------------o
        */
    -->
    <title>RGraph: Javascript charts library - Tooltips</title>

    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
    <link rel="icon" type="image/png" href="../favicon.png">
    
    <meta property="og:title" content="RGraph: Javascript charts library" />
    <meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
    <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
    
    <!-- Place this tag in your head or just before your close body tag -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

    <script src="../libraries/RGraph.common.core.js"></script>
    <script src="../libraries/RGraph.common.tooltips.js"></script>
    <script src="../libraries/RGraph.line.js"></script>
    <script src="../libraries/RGraph.bar.js"></script>
    <script src="../libraries/RGraph.pie.js"></script>
    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
    
    <style>
        .bar_chart_tooltips_css {
            background-color: white ! important;
            border: 2px solid black ! important;
            padding: 3px;
            padding-top: 5px ! important;
            font-size: 14pt ! important;
            text-align: center;
            -webkit-box-shadow: 0 0 15px gray ! important;
            -moz-box-shadow: 0 0 15px gray ! important;
            box-shadow: 0 0 15px gray ! important;
        }
    </style>

    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-54706-2']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

</head>
<body>

    
    <!-- Social networking buttons -->
        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed; width: 140px; height: 20px">
            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20chart%20types&title=RGraph:%20Javascript%20charts%20%26%20graph%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" style="position: relative; top: 1px" /></a>
            <a href="http://www.twitter.com/_RGraph" target="_blank" title="Follow _RGraph on Twitter"><img src="../images/twitter.png" alt="Follow _RGraph on Twitter"/></a>
            <iframe src="http://www.facebook.com/plugins/like.php?app_id=253862424642173&amp;href=http%3A%2F%2Fwww.rgraph.net&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="width: 80px; height:21px; position: relative; top: 1px"></iframe>
        </div>
        
        <script>
            // Opera fix
            if (navigator.userAgent.indexOf('Opera') == -1) {
              document.getElementById("social_icons").style.position = 'fixed';
            }
        </script>
        
        <div id="google_plusone">
            <!-- Place this tag where you want the +1 button to render -->
            <g:plusone href="http://www.rgraph.net"></g:plusone>
        </div>
    <!-- Social networking buttons -->

    <div id="breadcrumb">
        <a href="../index.html">RGraph: Javascript charts library</a>
        >
        <a href="index.html">Documentation</a>
        >
        Tooltips
    </div>

    <h1>RGraph: <span>Javascript charts library</span> - Tooltips</h1>

    <script>
        if (RGraph.isIE8()) {
            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag.</div>');
        }
    </script>

    <div style="float: right; text-align: right">
        <canvas width="600" height="250" id="cvs">[No canvas support]</canvas><br />
        Tooltip effect:
        <select id="effect" onchange="RGraph.Clear(line.canvas); line.Set('chart.tooltips.effect', this.options[this.selectedIndex].value); line.Draw();">
            <option>none</option>
            <option selected>fade</option>
            <option>expand</option>
            <option>contract</option>
            <option>snap</option>
        </select>
    </div>

    <script>
        /**
        * This is the function which handles the display of all the tooltips (for the line chart) - it is passed the
        * zero-indexed number of the tooltip. Here, that index is just used to get the text from an array, but you
        * could do anything with it. You could even perform an AJAX request to get the tooltip. Note that at this
        * point, ie when the text is being retrieved, the tooltip DIV doesn't exist yet.
        */
        function myTooltipFunc (idx)
        {
            var tooltips = ['<b>Winner!</b><br />John','Fred','Jane','Lou','Pete','Kev'];
            return tooltips[idx];
        }


        window.onload = function ()
        {
            // Has to be a global variable
            line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
            
            /**
            * These lines show you some of the alternative methods  of specifying tooltips:
            * 
            *  o An array of strings - one per tooltip
            *  o An array of functions - one per tooltip
            *  o A single function that handles all of the tooltips
            * o An "id:xxx" string (xxx being the ID tag of a div whose contents are used as the tooltip)
            * 
            * Functions are passed a single argument - the zero-indexed number of the tooltip
            */
            //line.Set('chart.tooltips', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
            line.Set('chart.tooltips', [myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc, myTooltipFunc]);
            //line.Set('chart.tooltips', myTooltipFunc);
            line.Set('chart.tooltips.effect', 'fade');
            line.Set('chart.hmargin', 10);
            line.Set('chart.linewidth', 2);
            line.Set('chart.shadow', true);
            line.Set('chart.shadow.offsetx', 0);
            line.Set('chart.shadow.offsety', 0);
            line.Set('chart.shadow.blur', 15);
            line.Set('chart.colors', ['green']);
            line.Set('chart.tickmarks', 'circle');
            line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
            line.Draw();


            /* -------------------------------------------------------------------------------------------------------- */


            /**
            * Create and display the bar chart
            */
            bar = new RGraph.Bar('cvs2', [41.2,51.3,64.2,42.1,32.2,43.2,45.8,45.1,61.1]);
            
            var grad = bar.context.createLinearGradient(0,25,0,225);
            grad.addColorStop(0, 'blue');
            grad.addColorStop(1, 'white');

            bar.Set('chart.hmargin', 15);
            bar.Set('chart.colors', [grad]);
            bar.Set('chart.linewidth', 2);
            bar.Set('chart.tickmarks', 'endsquare');
            bar.Set('chart.labels', ['John', 'Pete', 'Glynn', 'Kev', 'Youssef', 'Lou', 'Kiff', 'Liz', 'Fred']);
            bar.Set('chart.background.grid.autofit', true);
            bar.Set('chart.strokecolor', 'rgba(0,0,0,0)');
            bar.Set('chart.tooltips', getTooltip); // The getTooltip() function (defined below) provides the tooltip text ONLY
            bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');
            bar.Set('chart.tooltips.effect', 'fade');
            bar.Draw();
            
            /**
            * This installs the RGraph ontooltip event handler. The CreateTooltipGraph() function is defined below
            */
            RGraph.AddCustomEventListener(bar, 'ontooltip', CreateTooltipGraph);
        }


        /*
        * Used by the bar chart to get the tooltip text.
        * 
        * @param idx int The zero indexed number of the tooltip
        */
        function getTooltip(idx)
        {
            return '<b>' + bar.Get('chart.labels')[idx] + 's stats</b><br /><canvas id="__tooltip_canvas__" width="400" height="150" style="background-color: white; margin: 5px">[No canvas support</canvas>';
        }


        /**
        * This is the function that is called (by the ontooltip event) to create the tooltip charts
        * 
        * @param obj object   The chart object
        */
        function CreateTooltipGraph(obj)
        {
            // These are the statistics that are shown in the tooltips. This data could quite easily
            // come from your server.
            var stats = [
                         [5,8,7,6,9,5,4,6,3,5,4,4],
                         [4,6,7,8,6,5,4,4,2,5,8,4],
                         [3,2,1,3,4,5,1,5,6,7,4,1],
                         [3,5,1,2,4,8,9,6,7,4,5,1],
                         [9,6,7,8,7,9,4,5,6,3,5,8],
                         [4,8,5,6,4,3,5,4,6,5,7,8],
                         [4,3,4,9,8,7,8,6,4,3,5,1],
                         [1,2,3,1,2,4,5,1,6,5,3,1],
                         [2,3,5,4,3,5,1,3,5,2,6,4]
                        ];

            var idx  = RGraph.Registry.Get('chart.tooltip').__index__;
            var data = stats[idx];

            // This data could be dynamic
            var g  = new RGraph.Line('__tooltip_canvas__', data);
            g.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
            g.Set('chart.gutter.top', 5);
            g.Set('chart.hmargin', 5);
            g.Set('chart.tickmarks', 'endcircle');
            g.Set('chart.background.grid.autofit', true);
            g.Draw();
        }


    </script>

    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#hold">What can they hold?</a></li>
        <li><a href="#how">How can I specify them?</a></li>
        <li><a href="#what">What can I specify?</a></li>
        <li><a href="#charts">Can I show charts in tooltips?</a></li>
        <li><a href="#customise">Can I customise the appearance of tooltips?</a></li>
        <li><a href="#effects">What tooltip effects are available?</a></li>
        <li><a href="#firefox">Tooltips, the clipboard and Firefox</a></li>
        <li><a href="#override">Can I override the tooltip function?</a></li>
    </ul>

    <a name="introduction"></a>
    <h4>Introduction</h4>

    <p>
        Tooltips are a very effective and straight forward way to extend your charts and add more information to them, without overloading
        the user.
    </p>
    
    <a name="hold"></a>
    <h4>What can they hold?</h4>
    
    <p>
        At the base level, tooltips are DIVs, so they can hold a multitude of HTML - images, videos etc. See <a href="#charts">below</a>
        for information on showing charts in tooltips.
    </p>

    <a name="how"></a>
    <h4>How can I specify them?</h4>
    
    <p>
        You can specify them by including the tooltips code and then using the <i>chart.tooltips</i> property. For example:
    </p>
    
    <ol>
        <li>
            Include the RGraph libraries.
            <pre class="code">
&lt;script src="RGraph.common.core.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.common.tooltips.js"&gt;&lt;/script&gt;
&lt;script src="RGraph.line.js"&gt;&lt;/script&gt;
</pre>
        </li>
        
        <li>
            Define your chart and set the tooltips property.
            <pre class="code">
&lt;script&gt;
    window.onload = function ()
    {
        var line = new RGraph.Line('cvs', [64,34,26,35,51,24]);
        <span style="color: green">line.Set('chart.tooltips', ['&lt;b&gt;Winner!&lt;/b&gt;&lt;br /&gt;John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);</span>
        line.Set('chart.tooltips.effect', 'expand');
        line.Set('chart.hmargin', 10);
        line.Set('chart.linewidth', 2);
        line.Set('chart.shadow', true);
        line.Set('chart.shadow.offsetx', 0);
        line.Set('chart.shadow.offsety', 0);
        line.Set('chart.shadow.color', 'green');
        line.Set('chart.shadow.blur', 25);
        line.Set('chart.colors', ['green']);
        line.Set('chart.tickmarks', 'circle');
        line.Set('chart.labels', ['John', 'Fred', 'Jane', 'Lou', 'Pete', 'Kev']);
        line.Draw();
    }
&lt;/script&gt;
</pre>
        </li>
    </ol>

    <a name="what"></a>
    <h4>What can I specify?</h4>
    
    <p>
        The tooltips that you specify are usually strings (which can contain HTML). They can however also be functions which are called when they're about
        to be displayed. The function should return the text that is used as the tooltip. You have the option to either specify
        one function per data point, or just one function for all of the tooltips. You can mix functions and strings if you wish.
        These functions are passed the numerical, zero-indexed tooltip index and the return value is used as the tooltip
        text. So to summarise:
    </p>
    
    <ul>
        <li>
            An array of strings. The string is used as the tooltip. Eg:
            <pre class="code">myGraph.Set('chart.tooltips', ['John', 'Fred', 'Lou']);</pre>
        </li>

        <li>
            An array of function objects. Each function is called and should return the text to be used. Eg:
            <pre class="code">myGraph.Set('chart.tooltips', [getJohnTooltip, getFredTooltip, getLouTooltip]);</pre>
        </li>

        <li>
            A single function object. This is probably the most useful. This function is called whenever a tooltip
            is about to be displayed, and passed the numerical, zero-indexed tooltip index of the point on the chart.
            The function should return the text to be used as the tooltip. Note that the function you specify is called
            <i>before</i>
            the tooltip DIV has been created, so you cannot access it. If you wish to customise the appearance
            of the tooltip, you can use either the tooltip <a href="css.html">CSS class</a> or a call to <i>setTimeout()</i>. Eg:
            <pre class="code">myGraph.Set('chart.tooltips', getTooltip);</pre>
        </li>
        
        <li>
            An array of DIV ids. This will make working with large tooltips easier. You basically specify the id of a DIV whose
            .innerHTML is then used as the tooltip. Only the contents of the DIV are used, not the DIV itself, so you can hide
            the DIV by setting its <i>display</i> CSS value to <i>none</i>. An example of this in action is the
            <a href="../examples/line.html">first line chart</a>. For example:
            
            <pre class="code">myBar.Set('chart.tooltips', ['id:myDiv', ...])</pre>
        </li>
    </ul>

    <a name="charts"></a>
    <h4>Can I show charts in tooltips?</h4>

    <canvas style="float: right" id="cvs2" width="600" height="250">[No canvas support]</canvas>

    <p>
        You can, and with the custom event support that RGraph has, it's reasonably easy. Simply attach your function that
        creates the chart to the <i>ontooltip</i> event. This allows the tooltip HTML to be created and added to the page
        so that the code that creates the chart can run. The sequence is:
    </p>
    
    <ol>
        <li style="margin-top: 0">Specify the HTML for the tooltip as normal (including the &lt;canvas&gt; tag).</li>
        <li style="margin-top: 0">Use the <i>ontooltip</i> RGraph event so that a function is called when a tooltip is shown.</li>
        <li style="margin-top: 0">This function should subsequently create the chart.</li>
    </ol>
    
    <p>
        The tooltip DIV is to be found in the RGraph registry - <i>RGraph.Registry.Get('chart.tooltip')</i>. And if you want it the
        numerical zero indexed count of the tooltip is to be found in the <i>__index__</i> property:
        <i>RGraph.Registry.Get('chart.tooltip').__index__</i>
    </p>
    
    <pre class="code">
&lt;script src="RGraph.common.core.js" &gt;&lt;/script&gt;
&lt;script src="RGraph.common.tooltips.js" &gt;&lt;/script&gt;
&lt;script src="RGraph.bar.js" &gt;&lt;/script&gt;
&lt;script src="RGraph.line.js" &gt;&lt;/script&gt;

&lt;style&gt;
    .RGraph_tooltip {
        background-color: white ! important;
    }
&lt;/style&gt;

&lt;canvas id="cvs" width="600" height="250"&gt;[No canvas support]&lt;/canvas&gt;

&lt;script&gt;
    window.onload = function ()
    {
        labels = ['Gary','Pete','Lou','Ned','Kev','Fred'];

        bar = new RGraph.Bar("cvs", [4.5,28,13,26,35,36]);
        bar.Set('chart.tooltips', function (idx) {return labels[idx] + 's stats&lt;br/&gt;&lt;canvas id="__tooltip_canvas__" width="400" height="150"&gt;[No canvas support]&lt;/canvas&gt;';});
        bar.Set('chart.hmargin', 10);
        bar.Set('chart.tickmarks', 'endcircle');
        bar.Set('chart.colors', ['blue']);
        bar.Set('chart.ymax', 100);
        bar.Set('chart.labels', labels);
        bar.Draw();
        
        <span style="color: green">RGraph.AddCustomEventListener(line, 'ontooltip', CreateTooltipGraph);</span>
    }
      

    <span style="color: green">
    /**
    * This is the function that is called by the ontooltip event to create the tooltip charts
    * 
    * @param obj object   The chart object
    */
    function CreateTooltipGraph(obj)
    {
        // This data could be dynamic
        var line  = new RGraph.Line('__tooltip_canvas__', [5,8,7,6,9,5,4,6,3,5,4,4]);
        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        line.Set('chart.hmargin', 5);
        line.Set('chart.tickmarks', 'endcircle');
        line.Set('chart.background.grid.autofit', true);
        line.Draw();
    }
    </span>
&lt;/script&gt;
</pre>

    <p>
        If you want to see more source code, simply view the source of this page and look at the code that creates the bar chart.
        There's also a basic stripped-down example <a href="basic_tooltips.html">here</a>.
    </p>

    <br clear="all" />    

        <a name="customise"></a>
        <h4>Can I customise the appearance of tooltips?</h4>
        
        <p>
            Yes. You can either use the default CSS class <i>RGraph_tooltip</i>, or you can specify a specific CSS class that a
            charts tooltips should use with the property <i>chart.tooltips.css.class</i>. The two charts on this page have
            different looking tooltips by using this method - the line chart uses the default look, whilst the bar chart
            overrides the CSS class name and sets it to <i>bar_chart_tooltips_css</i>. For example:
        </p>
        
        <pre class="code">bar.Set('chart.tooltips.css.class', 'bar_chart_tooltips_css');</pre>
        
        <pre class="code">
&lt;style&gt;
    .bar_chart_tooltips_css {
        background-color: white ! important;
        border: 2px solid black ! important;
        padding: 3px;
    }
&lt;/style&gt;
</pre>

        <p>
            You can read more about RGraph CSS classes <a href="css.html">here</a>.
        </p>

        <a name="effects"></a>
        <h4>What tooltip effects are available?</h4>
        
        <p>
            These effects are available to you:
        </p>
        
        <ul>
            <li>fade</li>
            <li>expand</li>
            <li>contract</li>
            <li>snap</li>
            <li>none</li>
        </ul>
        
        <p>
            All of them are as their names imply. <i>fade</i> is a straight forward fade in effect, <i>expand</i> is another effect
            which expands outward from the center of the tooltip, <i>contract</i> is like the <i>expand</i> effect but in reverse, <i>snap</i> is an effect which can be used in a limited set of circumstances
            and "snaps" to the current mouse position and <i>none</i> is simply no effect at all. The default effect used
            by all chart types is <i>fade</i>. Note: If you're showing canvases in your tooltips then the <i>expand</i>, <i>contract</i> and <i>snap</i>
            effects will not work - you must use <i>fade</i> or <i>none</i>.
        </p>
        
        <p>
            <b>Note:</b> The snap effect is only available to chart types where the tooltip is triggered using the onmousemove event.
            Currently this means the <i>Line chart</i>, <i>Rscatter chart</i>, <i>Scatter chart</i> and Radar chart. It can also
            be negatively effected when using multiple charts on one page.
        </p>


        <a name="firefox"></a>
        <h4>Tooltips, the clipboard and Firefox</h4>
        
        <p>
            If you're using Firefox, there's a note about tooltips and the clipboard (ie copying text) on the <a href="issues.html">issues page</a>.
        </p>
        
        <a name="override"></a>
        <h4>Can I override the tooltip function?</h4>

        <p>
            You can by stipulating <i>chart.tooltips.override</i>. This should be a function object that handles everything with regard
            to showing the tooltip. Highlighting the chart is still done for you - the override function is only concerned with showing
            the tooltip. The override function is passed these arguments:
        </p>

        <ul>
            <li>canvas - The HTML canvas element, the same as what you get from document.getElementById()</li>
            <li>text - The tooltip text (id:xxx strings are NOT expanded)</li>
            <li>x - The X coordinate in relation to the entire page</li>
            <li>y - The Y coordinate in relation to the entire page</li>
            <li>index - The numerical index of the tooltip in the original tooltip array</li>
        </ul>
        
        <p>
            <b>Note:</b> Although "id:xxx" strings are not expanded for you, you can easily do this yourself by using the
            <i>RGraph.getTooltipText('id:xxx')</i> function.
        </p>
        
        <pre class="code">
&lt;script&gt;
    function tooltip_override (canvas, text, x, y, idx)
    {
        alert('In tooltip override function...');
    }
    myObj.Set('chart.tooltips.override', tooltip_override);
&lt;/script&gt;
</pre>

<div id="foo">Foo</div>
</body>
</html>